<template>
  <div>
    <div>
      <pure-table class="mt-5" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" 
        @selection-change="selectionChange" :isShowPag="false">
        <template #condition="{ row }">
          <div v-for="(item, index) in row.condition" :key="index">
            <el-space v-if="item.triggerType == 1">
              当触发告警{{ isNullOrEmpty(item.triggerParamDesc) }}时
            </el-space>
            <el-space v-if="item.triggerType == 2">
              当数据{{ isNullOrEmpty(item.triggerParamDesc) }}{{ TRIGGERCONDITIONTEXT[item.triggerTerm]?.label
              }}{{ isNullOrEmpty(item.triggerValue) }}时
            </el-space>
            <el-space v-if="item.triggerType == 3">
              当触发事件{{ isNullOrEmpty(item.triggerParamDesc) }}时
            </el-space>
            <el-space v-if="item.triggerType == 4">
              当触发控制时间{{ isNullOrEmpty(item.triggerParamDesc) }}时
            </el-space>
          </div>
        </template>
        <template #control="{ row }">
          <div v-for="(item, index) in row.control" :key="index">
            <el-space>
              {{ isNullOrEmpty(item.commandName) }}({{ isNullOrEmpty(item.deviceName) }})
            </el-space>
          </div>
        </template>
        <template #action="{ row }">

        </template>
      </pure-table>
    </div>
    <!-- <controlform
      v-model="centerDialogVisible"
      :id="editid"
      :closedilog="closedilog"
    ></controlform> -->
  </div>
</template>
<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import { TRIGGERCONDITIONTEXT } from "@/constant/device-mangenment";
import { getControlList } from "@/api/screen/index";
import { ref, reactive } from "vue";
const tableData = reactive({
  data: [],
  total: 0
});
const props = defineProps({
  deviceId: {
    type: String,
    default: ''
  },
  deviceinfo: {
    type: Object,
    default: () => { }
  }
})
const selectionData = ref([]);
const selectionChange = data => {
  selectionData.value = data;
};
const roleTableConfig = [
  { prop: "id", label: "编号", width: 100 },
  { slot: "condition", label: "触发条件",showOverflowTooltip:true },
  { prop: "delay", label: "延迟时间" },
  { slot: "control", label: "联动控制" },
];



const getData = () => {
  getControlList({ deviceId: props.deviceId }).then(res => {
    if (res.code == 200) {
      tableData.data = res.result.data;
    }
  });
};

onMounted(() => {
  getData();
});
</script>
